<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <title>登录页面</title>
  <link rel="stylesheet" href="static/layui-v2.5.6/layui/css/layui.css" media="all">
  <style>
	  body{
		  background-image: url(https://img.alicdn.com/tfs/TB1zsNhXTtYBeNjy1XdXXXXyVXa-2252-1500.png);
	  }
	  .message{
		  margin: 10px -40px 20px 0px;
		  padding: 18px 0 18px 60px;
		  background: #189F92;
		  position: relative;
		  color: #fff;
		  font-size: 16px;
	  }
	  .darkbannerwrap{
		  background: url(img/aiwrap.png);
		  width: 18px;
		  height: 10px;
		  margin: 0 0 20px -58px;
		  position: relative;
	  }
	  .login{
		  margin: 120px auto 0 auto;
		  min-height: 420px;
		  max-width: 420px;
		  padding: 40px 40px 40px 0px;
		  background-color: #ffffff;
		  margin-left: auto;
		  margin-right: auto;
		  border-radius: 4px;
		  /* overflow-x: hidden; */
		  box-sizing: border-box;
	  }
  </style>
</head>
<body>
	<div class="layui-row">
		<div class="layui-col-md4 layui-col-md-offset4">
			<div class="login" >
				<div class="message">x-admin2.0-管理登录</div>
				<div id="darkbannerwrap"></div>
				<form class="layui-form" action="main.html">
				  <div class="layui-form-item">
					<label class="layui-form-label">账号</label>
					<div class="layui-input-block">
					  <input type="text" name="title" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
					</div>
				  </div>
				  <div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
					  <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
					</div>
				  </div>
				  <div class="layui-form-item">
					<label class="layui-form-label">验证码</label>
					<div class="layui-input-inline" style="width: 120px;">
					  <input type="text" name="password" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 120px;">
						<img valign="middle" id="imgcode" onclick="refreshCode('imgcode')" src="static/layui-v2.5.6/layui/images/face/19.gif" />
					</div>
				  </div>
				  <div class="layui-form-item">
					  <div class="layui-input-block">
						<button type="button" class="layui-btn" lay-submit lay-filter="loginForm">登录</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					  </div>
					</div>
				</form>
			</div>
		</div>
	</div>

<script src="static/layui-v2.5.6/layui/layui.js"></script>
<script>
layui.use(['form','jquery'], function(){
  var form = layui.form
	,$ = layui.jquery;
  //
  document.title = 'layui-admx';
  $(".message").html(document.title);
  localStorage.setItem('appName',document.title);
  //监听提交
  form.on('submit(loginForm)', function(data){
    layer.msg(JSON.stringify(data.field));
	window.location.href = "main.html";
    return true;
  });
});

function refreshCode(imgid){
	layui.use(['element','jquery'], function(){
		var $ = layui.jquery;
		var img = document.getElementById(imgid);
		if(layui.url(img.src).search.t == undefined){
			img.src = img.src +'?t='+new Date().getTime();
		}else{
			var re=eval('/(t=)([^&]*)/gi');
			img.src = img.src.replace(re,'t='+new Date().getTime());
		}
		
	});
}
</script>
</body>
</html>